<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>


<body>
    <!-- axios,功能强大的网络请求库 实例1：通过已有的接口调用笑话 ，官网网址：https://github.com/axios/axios,是基于ajax,hrx
        接口1：请求地址：https://autumnfish.cn/api/joke/list
        请求方法：get
        请求参数：num
        响应内容：随机笑话
     -->
    <input type="button" value="get请求笑话" class="get">
    <input type="button" value="post请求" class="post">
    <script>
        var get = document.querySelector(".get");
        get.addEventListener('click', function() {
            axios.get("https://autumnfish.cn/api/joke/list?num=1") //此处是请求地址
                .then(function(response) { //这里是请求完成后需要执行的内容
                        console.log(response);
                    },
                    function(err) { //此处是错误发生时
                        console.log(err);
                    })
        })

        // 接口1： 请求地址： https://autumnfish.cn/api/user/reg
        //     请求方法： post
        // 请求参数： username 字符串
        // 响应内容： 注册失败或成功
        // -->
        var post = document.querySelector(".post");
        post.addEventListener('click', function() {
            axios.post("https://autumnfish.cn/api/user/reg", {
                    username: 'calin'
                }) //与get方法不同的是这里传参用的是对象
                .then(function(response) {

                        console.log(response);
                    },
                    function(err) {
                        console.log(err);
                    })
        })
    </script>
</body>

</html>